import { connect } from 'react-redux'
import { createProduct } from '../actions'
import React from 'react'
import { Col, FieldGroup, ControlLabel, Button, FormControl, FormGroup, Form } from 'react-bootstrap'

class ProductForm extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      name: '',
      intro: '',
      category: '',
      price: '',
      src: ''
    }
  }

  handleNameChange (e) {
    this.setState({name: e.target.value})
  }

  handleIntroChange (e) {
    this.setState({intro: e.target.value})
  }

  handleCategoryChange (e) {
    this.setState({category: e.target.value})
  }

  handlePriceChange (e) {
    this.setState({price: e.target.value})
  }

  handleSrcChange (e) {
    var file    = e.target.files[0];
    var reader  = new FileReader();

    reader.addEventListener("load", () => {
        this.setState({src: reader.result})
      }, false);

    if (file) {
      reader.readAsDataURL(file);
    }

  }

  handleSubmit (e) {
    e.preventDefault()
    if (!this.state.name || !this.state.category || !this.state.intro || !this.state.src || !this.state.price) {
      alert('请填写完毕', this.state)
      return
    }
    this.props.createProduct(this.state)
    this.setState({
      name: '',
      intro: '',
      price: '',
      src: '',
      category: ''
    })
  }

  render () {
   return(
    <Col xs={6} xsOffset={3}>
      <Form onSubmit={(e) => { this.handleSubmit(e) }}>
        <FormGroup controlId="formValidationSuccess1">
          <ControlLabel>商品名称</ControlLabel>
          <FormControl type="text"
            value={this.state.name} onChange={(e)=>{this.handleNameChange(e)}}/>
        </FormGroup>
        <FormGroup controlId="formValidationSuccess2">
          <ControlLabel>商品介绍</ControlLabel>
          <FormControl type="text"
            value={this.state.intro} onChange={(e)=>{this.handleIntroChange(e)}} />
        </FormGroup>
        <FormGroup controlId="formValidationSuccess2">
          <ControlLabel>所属类别</ControlLabel>
          <FormControl type="text"
            value={this.state.category} onChange={(e)=>{this.handleCategoryChange(e)}} />
        </FormGroup>
        <FormGroup controlId="formValidationSuccess3">
          <ControlLabel>商品价格</ControlLabel>
          <FormControl type="text"
            value={this.state.price} onChange={(e)=>{this.handlePriceChange(e)}} />
        </FormGroup>
        <FormGroup controlId="formValidationSuccess4" onChange={(e)=>{this.handleSrcChange(e)}}>
          <ControlLabel>图片上传</ControlLabel>
          <FormControl type="file" />
        </FormGroup>

        <Button type="submit" block>
          提交
        </Button>
      </Form>
    </Col>
    )
  }
}

const mapStateToProps = (state, ownProps) => {
  return {
  }
}

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    createProduct: (product) => {
      dispatch(createProduct(product))
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(ProductForm)